<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
	href="../plugin/bootstrap/css/bootstrap.min.css" />
</head>

<style type="text/css">
body {
	background-color: #1E9FFF;
}

a {
	text-decoration: none;
	color: red;
}

.conter {
	width: 300px;
	margin: 0 auto;
	margin-top: 200px;
	padding: 10px;
	background-color: #fff;
	box-shadow: 0px 0px 10px 10px #696969;
}

.login {
	display: flex;
	padding: 10px 0;
	border-bottom: 1px solid #bbbbbb;
}

.login input {
	background: none;
	outline: none;
	border: none;
	flex: 1;
}

.login button {
	background-color: #f5f5f5;
	color: #ccc;
	padding: 7px 8px;
	border-radius: 8px;
	outline: none;
	border: none;
}

.btnOK {
	padding: 10px 0px;
	display: flex;
	justify-content: center;
}

.btnOK button {
	width: 230px;
	height: 40px;
	background-color: pink;
	color: #fff;
	border-radius: 14px;
	border: none;
	outline: none;
	font-size: 20px;
}

.btnOK button:hover {
	box-shadow: 0px 0px 5px 5px #bbbbbb;
}

.doing {
	display: flex;
	justify-content: center;
	align-items: center;
}

.doing input {
	margin: 0 8px;
}

.doing a {
	margin-left: 10px;
}
</style>
<body>
	<div class="conter">
		<div class="login">
			<lable class="glyphicon glyphicon-user">
			<input type="text" placeholder="请输入电话号码" name="phone" id="phone" /></lable>
		</div>
		<div class="login">
			<lable class="glyphicon glyphicon-edit">
			<input type="text" placeholder="请输入验证码" name="keycode" id="keycode" /></lable>
			<input type="button" id="getCode" value="免费获取验证码"
				onclick="sendemail()" />
		</div>
		<div class="btnOK">
			<button onclick="taper()">确定</button>
		</div>
		<div class="doing">
			<input type="radio" name="">已阅读并同意<a href="">《服务条例》</a>
		</div>
		<div class="doing">
			<a href="./login">密码登录</a>
		</div>

	</div>
	<script type="text/javascript">
		var countdown = 60;
		//var phoneVal=$("input[name='phone']").val();
		//var codeVal=$("#keycode").val();
		//alert(phoneVal)
		function sendemail() {
			var obj = $("#getCode");
			var phoneVal = $("input[name='phone']").val();
			console.log(phoneVal);
			setTime(obj);
			/* $.ajax({
				type : "POST",
				url : "http://2j6t691475.wicp.vip/SenderCode/code",
				dataType : "json",
				data : {
					"phone" : $("input[name='phone']").val()
				}
			})
			console.log(phoneVal); */
		}
		function setTime(obj) { //发送验证码倒计时
			if (countdown == 0) {
				obj.attr('disabled', false);
				//obj.removeattr("disabled"); 
				obj.val("获取验证码");
				countdown = 60;
				return;
			} else {
				obj.attr('disabled', true);
				obj.val("重新发送" + countdown + "s");
				countdown--;
			}
			setTimeout(function() {
				setTime(obj)
			}, 1000)
		}
		function taper() {
			window.location.href = "./index.html";
		}
	</script>
</body>

</html>